<template>
  <div class="buttonList">
    按钮类型
    <div class="buttonType">
      <ls-button>默认</ls-button>
      <ls-button type="primary">主要</ls-button>
      <ls-button type="success">成功</ls-button>
      <ls-button type="danger">危险</ls-button>
      <ls-button type="warn">警告</ls-button>
    </div>
    按钮尺寸
    <div class="buttonType">
      <ls-button size="small">默认</ls-button>
      <ls-button size="middle">主要</ls-button>
      <ls-button size="large">危险</ls-button>
    </div>
    按钮禁用
    <div class="buttonType">
      <ls-button disabled>默认</ls-button>
      <ls-button type="primary" disabled>主要</ls-button>
      <ls-button type="success" disabled>成功</ls-button>
      <ls-button type="danger" disabled>危险</ls-button>
      <ls-button type="warn" disabled>警告</ls-button>
    </div>
    按钮圆角
    <div class="buttonType">
      <ls-button round>默认</ls-button>
      <ls-button type="primary" round>主要</ls-button>
      <ls-button type="success" round>成功</ls-button>
      <ls-button type="danger" round>危险</ls-button>
      <ls-button type="warn" round>警告</ls-button>
    </div>
    自定义按钮
    <div class="buttonType">
      <ls-button type="primary" width="100" height="60">主要</ls-button>
      <ls-button type="success" width="100" height="60" font="20"
        >成功</ls-button
      >
      <ls-button type="danger" width="100" height="60" fontColor="#141319">
        危险</ls-button
      >
    </div>
    消息提示
    <div class="buttonType">
      <!-- message.info({
        type: 'info',
        content: '这是一条消息',
      }) -->
      <ls-button
        @click="
          $message.info({
            type: 'info',
            content: '这是一条消息7776666666666666',
            shake: true,
            width: 300,
          })
        "
        >消息</ls-button
      >
      <ls-button
        @click="
          $message.success({
            type: 'success',
            content: '这是一条成功消息',
          })
        "
        >成功</ls-button
      >
      <ls-button
        @click="
          $message.error({
            type: 'error',
            content: '这是一条错误消息',
          })
        "
        >错误</ls-button
      >
      <ls-button
        @click="
          $message.warn({
            type: 'warn',
            content: '这是一条警告消息',
          })
        "
        >警告</ls-button
      >
    </div>
    对话框
    <div>
      <ls-button @click="openDialog"></ls-button>

      <ls-dialog
        :isShowMask="isShowMask"
        @closeDialog="closeDialog"
        height="600"
        >6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</ls-dialog
      >
    </div>
    手风琴
    <div>
      <!-- fontSize="30"
      fontColor="#3875f6"
      hoverFontColor="#67c23a"
      hoverHeight="500"
      tilteHeight="100" -->
      <ls-accordion titleCenter>
        <ls-accordion-item
          src="/public/images/Snipaste_2023-11-17_10-26-59.png"
          title="555"
          link="8888"
        >
        </ls-accordion-item>
        <ls-accordion-item
          src="/public/images/Snipaste_2023-11-17_10-27-16.png"
          title="565"
          link="8888"
        >
        </ls-accordion-item>
        <ls-accordion-item
          src="/public/images/Snipaste_2023-11-17_10-27-35.png"
          title="4565"
          link="8888"
        >
        </ls-accordion-item>
        <ls-accordion-item
          src="/public/images/Snipaste_2023-11-17_10-28-11.png"
          title="7875"
          link="8888"
        >
        </ls-accordion-item>
        <ls-accordion-item
          src="/public/images/Snipaste_2023-11-17_10-26-59.png"
          title="15"
          link="8888"
        >
        </ls-accordion-item>
      </ls-accordion>
    </div>
    加载中
    <div style="height: 50px"></div>
    <div style="display: flex">
      <ls-spin indicator="dynamic-circle" size="large" tip="999"></ls-spin>
      <ls-spin indicator="quarter-circle" size="large" tip="999"></ls-spin>
      <ls-spin indicator="dot" size="large" tip="999"></ls-spin>
      <ls-spin
        indicator="three-quarters-circle"
        size="large"
        tip="999"
      ></ls-spin>
    </div>
    <div style="height: 50px"></div>
    间隔
    <div>
      <ls-space align="center" size="60" direction="center">
        <ls-button type="primary">主要</ls-button>
        <ls-button type="success">成功</ls-button>
        <ls-button type="danger">危险</ls-button>
        <ls-button type="warn">警告</ls-button>
      </ls-space>
    </div>
    <!-- pdf预览
    <ls-pdf
      page-scale="page-fit"
      :width="800"
      :height="700"
      theme="dark"
      src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf"
      @loaded="onLoaded"
    >
    </ls-pdf> -->
    文字滚动
  </div>
  <ls-textScroll
    :text="luckyUsers"
    backgroundColor="#f5c58a"
    textColor="#3875f6"
    rate="2"
    fontSize="15"
  ></ls-textScroll>

  <!-- <ls-message></ls-message> -->
</template>
<script setup lang="ts">
import { ref } from "vue";

const isShowMask = ref(false);
const openDialog = () => {
  isShowMask.value = true;
  console.log("打开");
};
const closeDialog = () => {
  isShowMask.value = false;
  console.log("关闭");
};
const onLoaded = (pdfApp: any) => {
  console.log("loaded app:", pdfApp);
};
const luckyUsers = ref([
  {
    title: "000000抽中了xxx奖品",
  },
  {
    title: "111111抽中了xxx奖品",
  },
  {
    title: "222222抽中了xxx奖品",
    link: "https://www.baidu.com/",
  },
]);
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  border: 0;
}
.buttonList {
  text-align: left;

  .buttonType {
    display: flex;
    justify-content: space-between;
  }

  .buttonType > * {
    margin: 5px;
  }
}
</style>
